{% extends 'base.html' %}
{% load static %}
{% block content %}
    <div class="container-fluid">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <!--四个信息卡-->
                <!--status={'node_name': 'Leo-LPT', 'status': 'ok', 'pending': 0, 'running': 0, 'finished': 1}-->
                <div class="row row-cols-3 row-cols-md-3 row-cols-lg-4 g-3 mb-3">
                    {% for status_name, status in job_status.items %}
                        <div class="col">
                            <div class="card border-0 shadow-sm">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center justify-content-between ">
                                        {{ status_name }}: {{ status }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <hr>
                <!--表格-->
                <div class="table-responsive">
                    <table class="table table-hover table-bordered">
                        <thead>
                        <tr>
                            <th scope="col">爬虫名称</th>
                            <th scope="col">项目名称</th>
                            <th scope="col">状态</th>
                            <th scope="col">爬虫id</th>
                            <th scope="col">开始时间</th>
                            <th scope="col">结束时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for job in jobs %}
                            <tr>
                                <th scope="row">{{ job.spider }}</th>
                                <td>{{ job.project }}</td>
                                <td><span class="badge rounded-pill {{ job.status }}">{{ job.status }}</span></td>
                                <td>{{ job.id }}</td>
                                <td>{{ job.start_time }}</td>
                                <td>{{ job.end_time }}</td>
{#                                <td>{{ job.duration }}</td>#}
{#                                <td>#}
{#                                    <a href="{% url 'job_detail' job.id %}" class="btn btn-sm btn-outline-primary">Detail</a>#}
{#                                    <a href="{% url 'job_delete' job.id %}" class="btn btn-sm btn-outline-danger">Delete</a>#}
{#                                </td>#}
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
{% endblock %}